<template>
    <view>
		<view class="bg-white  padding-sm">
			<date-range-picker @change="dateRangeChange"></date-range-picker>
		</view>
		
        <view class="uni-flex row " >
			<view class="cu-bar search bg-white ">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<!-- <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="检索签约室" confirm-type="search"></input> -->
					<input :adjust-position="false" type="text" placeholder="检索签约室(请输入签约室名称)" @confirm="getDataList(null)" v-model="searchValue" confirm-type="search"></input>
					<text class="input-clear cuIcon-close" v-if="searchValue" @click="searchValue=''"></text>
				</view>
				<view class="action">
					<button class="cu-btn bg-blue shadow-blur round" hover-class="btn-hover"  @tap="showModal" data-target="DialogModal">创建签约室</button>
				</view>
			</view>
        </view>
		
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end solid-bottom">
					<view class="content ">创建签约室</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-form-group ">
					<view class="margin-right text-gray">名称:</view>
					<input type="text" style="border: 1px solid #ddd; padding: 4px 10px; border-radius: 10px; text-align: left;" 
					v-model="newSiginRoomName" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="createSign()">确定</button>
					</view>
				</view>
			</view>
		</view>
			
		<view>
			<mescroll-uni :fixed="false" :down="downOption" @down="getDataList" :up="{use:false}">
				<view class="cu-list menu-avatar margin-top" >					
					<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in dataList" :key="index"
					 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index"
					  @click="toSignRoom(item)" hover-class="list-hover">
						<view class="cu-avatar round lg" :style="[{backgroundImage: `url(${imageList[index % imageList.length]})` }]"></view>
						<view class="content">
							<view class="text-cut">{{item.RoomName}} </view>
							<view class="text-gray text-sm flex"> <view class="text-cut">创建人:{{item.ApplyName}}</view></view>
						</view>
						<view class="action date-label">
							<view class="text-grey text-sm">{{ toLatelyDate(item.CreateTime) }}</view>	
						</view>
						<view class="move">
							<view class="bg-red" @click.stop="dissolveSign(item)">解散签约室</view>
						</view>
					</view>
				</view>		
			</mescroll-uni>
		</view>
				
		<pagination 
			:current-page="currentPage" 
			:page-size="pageSize"
			:page-sizes="[7, 10, 15, 25, 30, 40]"
			layout="sizes jumper total"
			@current-change="pageChange"
			@size-change="sizeChange"
			:total="total"
			background
		></pagination>
		
		<load-progress :showProgress="showProgress"></load-progress>
		
    </view>
</template>

<script>
import iconfont from "@/components/iconfont/inconfont.vue";
import DateRangePicker from "@/components/date-range-picker/date-range-picker.vue";
import pagination from '@/components/pagination/pagination'
import { createSignRoom, reqSignRoomList, updateSignRoomStatus } from '@/common/api/zft.js'
import { toLatelyDate } from '@/common/utils/date.js'
import { getDate } from '@/common/utils/date.js'

import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";


export default {
    components: {
        iconfont,
		pagination,
        DateRangePicker,
		MescrollUni,

    },

    data() {
        return {	
			downOption: {
				auto: true //是否在初始化后,自动执行下拉回调callback; 默认true
			},
			showProgress: false,
			loading: false,
			CustomBar: this.CustomBar,
			modalName: null,
			listTouchStart: 0,
			newSiginRoomName: '',
			listTouchEnd: 9999,
			currentPage: 1,
			pageSize: 7,
			total: 0,
			signType:this.$store.state.common.signType.zft,
			imageList: ["/static/images/zft/signRoomAvater-2.jpg", "/static/images/zft/signRoomAvater-1.jpg"],
			dataList: [],
			startDate: '',
			endDate: '',
			searchValue: '',
		};
    },
	computed: {
		user() {
			return this.$store.state.user.userList[0]
		}
	},
	created () {
		this.startDate = getDate(null, -3)
		this.endDate = getDate()
		
		console.log('this.startDate', this.startDate)
		// this.getDataList();
	},
	methods: {		
		
		// 时间范围改变
		dateRangeChange(e) {
			this.startDate = e.startDate
			this.endDate = e.endDate
		},
		
		toLatelyDate(date) {
			return toLatelyDate(date);
		},
		getDataList(mescroll) {
			// SignType=类型&Userid=&Status=&StartDate=&EndDate=&RoomName=&Page=页数&Size=每页条数
			let params = {
				signType: this.signType,
				userid: this.user.Userid,
				status: 1,				
				page: this.currentPage,
				size: this.pageSize,
				startDate: this.startDate,
				endDate: this.endDate,
				roomName: this.searchValue,				
			}
			this.showProgress = true
			reqSignRoomList(params).then(({data}) => {
				console.log('reqSignRoomList', data)
				
				//联网成功的回调,隐藏下拉刷新的状态
				if (mescroll) mescroll.endSuccess();
				
				if (data && data.msgcode == 1000) {										
					this.dataList = data.data.ListData
					this.total = data.data.TotalCount
				} else {
					this.showToast(data.msg)
				}
				this.showProgress = false
			}).catch(err => {
				this.showProgress = false
				console.error('reqSignRoomList', err)
				
				//联网失败的回调,隐藏下拉刷新的状态
				if (mescroll) mescroll.endErr();
			})
		},
		pageChange(val) {
			this.currentPage = val
			this.getDataList()
		},
		sizeChange(val) {
			this.pageSize = val
			this.getDataList()
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX
		},

		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchEnd = e.touches[0].pageX
		},

		// ListTouch计算滚动
		ListTouchEnd(e) {		
			// 向左滑
			if (this.listTouchStart - this.listTouchEnd > 99) {
				this.modalName = e.currentTarget.dataset.target
			} else  {
				this.modalName = null
			}
		},
		// 创建签约室
		createSign () {
			if (this.loading) return;
			let name = this.newSiginRoomName;
			console.log('签约室名字', name)
			if (!name) {
				this.showToast('请重新输入！！')
				return;
			} 
			/*
			SignType=类型&Userid=建立人的userid&RooName=签约室名称
			*/
			this.loading = true;
		   let data = {
				userid: this.user.Userid,
				signType: this.signType,
				RoomName: name
			}
			console.log('请求的数据', data)
			createSignRoom(data).then(({data}) => {
				console.log('++++++++++++++++++++++=====', data)
				this.hideModal();
				if (data && data.msgcode == 1000) {
					this.dataList.unshift(data.data)
					this.toSignRoom(data.data)
				} else {
					this.showToast(data.msg)
				}
				this.loading = false
			}).catch(err => {
				this.loading = false
				console.log('签约室 err', err)
			})
			
			
		},
		
		// 解散签约
		dissolveSign(sign) {
			uni.showModal({
				title:'警告', 
				content: '签约室将不复被删除',
				complete: res => {
					if (res.confirm) {						
						if (this.loading) return
						/**
						 * 变更签约室状态	Get	/api/contract/SignRoomUpdateStatus	RoomId=签约室ID&Status=签约室状态	
						 * 0终止、1正常、2完成(网签结束)
						 */
						// uni.showModal({
						// 	title:'提示',
						// 	content: '你确定删除当前签约室吗'
						// })
						this.loading = true
						updateSignRoomStatus({roomId: sign.ID, status: 0}).then(({data}) => {
							console.log('更新的结果', data)
							if (data.msgcode == 1000) {
								this.getDataList()
							} else {
								this.showToast(data.msg)
							}
						}).then(() => {
							this.modalName = null
							this.loading = false
						})						
					} else {
						this.modalName = null
					}
				}
			})
		},
		toSignRoom (item) {
			uni.navigateTo({
				url:`/pages/sign-room/sign-room?roomName=${item.RoomName}&roomId=${item.ID}&ApplyName=${item.ApplyName}`
			})
		}
	}
};
</script>

<style scoped>
.date-label {
	width: 182upx !important;
}
.cu-list>.cu-item {
	/* transition: all .6s ease-in-out 0s; */
	/* transition: all 0.2s ease-in-out 0s; */
	transition: transform 350ms cubic-bezier(.165, .84, .44, 1)
}

</style>
